<template>
  <div>
    <el-card class="box-card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="0">
          <el-row>
            <el-col :span="12">
              <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
                <el-form-item label="姓名" prop="displayName">
                  <el-input v-model="ruleForm.displayName"></el-input>
                </el-form-item>
                <el-form-item label="登录账号" prop="username">
                  <el-input v-model="ruleForm.username" disabled></el-input>
                </el-form-item>
                <el-form-item label="性别">
                  <el-radio v-model="ruleForm.gender" label="1">女</el-radio>
                  <el-radio v-model="ruleForm.gender" label="2">男</el-radio>
                </el-form-item>
                <el-form-item label="员工编号">
                  <el-input v-model="ruleForm.employeeNumber" disabled></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                  <el-input v-model="ruleForm.mobile" disabled></el-input>
                </el-form-item>
                <el-form-item label="用户类型">
                  <el-select v-model="ruleForm.userType" :disabled="true">
                    <el-option value="EMPLOYEE" label="内部员工">内部员工</el-option>
                    <el-option value="SUPPLIER" label="供应商">供应商</el-option>
                    <el-option value="CUSTOMER" label="客户">客户</el-option>
                    <el-option value="CONTRACTOR" label="承包商">承包商</el-option>
                    <el-option value="DEALER" label="经销商">经销商</el-option>
                    <el-option value="PARTNER" label="合作伙伴">合作伙伴</el-option>
                    <el-option value="EXTERNAL" label="外部用户">外部用户</el-option>
                    <el-option value="INTERN" label="实习生">实习生</el-option>
                    <el-option value="TEMP" label="临时用户">临时用户</el-option>
                  </el-select>

                </el-form-item>
                <el-form-item label="用户状态">
                  <el-select v-model="ruleForm.userState" :disabled="true">
                    <el-option value="RESIDENT" label="在职">在职</el-option>
                    <el-option value="WITHDRAWN" label="离职">离职</el-option>
                    <el-option value="INACTIVE"  label="停薪留职">停薪留职</el-option>
                    <el-option value="RETIREE" label="退休">退休</el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="排序">
                  <el-input v-model="ruleForm.sortIndex" disabled></el-input>
                </el-form-item>

              </el-form>
            </el-col>
            <el-col :span="12">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="头像">
                  <el-image style="width: 100px; height: 100px" :src="ruleForm.pictureBase64" :fit="fit"></el-image>
                </el-form-item>
                <el-form-item label="域账号">
                  <el-input v-model="ruleForm.windowsAccount" disabled></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input v-model="ruleForm.email" disabled></el-input>
                </el-form-item>
                <el-form-item label="状态">
                  <el-input v-model="ruleForm.status" disabled></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="个人信息" name="1">
          <el-row>
            <el-col :span="12">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="姓" prop="familyName">
                  <el-input v-model="ruleForm.familyName"></el-input>
                </el-form-item>
                <el-form-item label="名" prop="givenName">
                  <el-input v-model="ruleForm.givenName"></el-input>
                </el-form-item>
                <el-form-item label="证件类型">
                  <el-select v-model="ruleForm.idType">
                    <el-option :value="0" :key="0" label="未知"> 未知 </el-option>
                    <el-option :value="1" :key="1" label="身份证"> 身份证 </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="婚姻状态">
                  <el-select v-model="ruleForm.married">
                    <el-option :value="0" label="未知"> 未知 </el-option>
                    <el-option :value="1" label="单身"> 单身 </el-option>
                    <el-option :value="2" label="已婚"> 已婚 </el-option>
                    <el-option :value="3" label="离异"> 离异 </el-option>
                    <el-option :value="4" label="丧偶"> 丧偶 </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="学历:">
                  <el-input v-model="ruleForm.education" />
                </el-form-item>
                <el-form-item label="毕业时间:">
                  <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item label="时区:">
                  <el-input v-model="ruleForm.timeZone" />
                </el-form-item>
                <el-form-item label="个人主页">
                  <el-input v-model="ruleForm.webSite" />
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="12">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="中间名">
                  <el-input v-model="ruleForm.middleName" />
                </el-form-item>
                <el-form-item label="昵称">
                  <el-input v-model="ruleForm.nickName" />
                </el-form-item>
                <el-form-item label="证件号码">
                  <el-input v-model="ruleForm.idCardNo" />
                </el-form-item>
                <el-form-item label="出生日期">
                  <el-input v-model="ruleForm.birthDate" />
                </el-form-item>
                <el-form-item label="毕业院校">
                  <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item label="工作时间">
                  <el-input v-model="ruleForm.startWorkDate" />
                </el-form-item>
                <el-form-item label="语言偏好">
                  <el-input v-model="ruleForm.preferredLanguage" />
                </el-form-item>
                <el-form-item label="即时通讯">
                  <el-input v-model="ruleForm.name" />
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>

        </el-tab-pane>
        <el-tab-pane label="机构信息" name="2">
          <el-row>
            <el-col :span="12">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="所属组织">
                  <el-input v-model="ruleForm.organization" :disabled="true" />
                </el-form-item>
                <el-form-item label="部门编号">
                  <el-input v-model="ruleForm.departmentId" :disabled="true" />
                </el-form-item>
                <el-form-item label="成本中心">
                  <el-input v-model="ruleForm.costCenter" :disabled="true" />
                </el-form-item>
                <el-form-item label="职位">
                  <el-input v-model="ruleForm.jobTitle" :disabled="true" />
                </el-form-item>
                <el-form-item label="助理">
                  <el-input v-model="ruleForm.assistant" :disabled="true" />
                </el-form-item>
                <el-form-item label="入职时间">
                  <el-input v-model="ruleForm.entryDate" :disabled="true" />
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="12">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="分支机构">
                  <el-input v-model="ruleForm.division" :disabled="true" />
                </el-form-item>
                <el-form-item label="部门名称">
                  <el-input v-model="ruleForm.department" :disabled="true" />
                </el-form-item>
                <el-form-item label="级别">
                  <el-input v-model="ruleForm.name" :disabled="true" />
                </el-form-item>
                <el-form-item label="上级经理">
                  <el-input v-model="ruleForm.manager" :disabled="true" />
                </el-form-item>
                <el-form-item label="办公地址">
                  <el-input v-model="ruleForm.workAddressFormatted" :disabled="true" />
                </el-form-item>
                <el-form-item label="离职时间">
                  <el-input v-model="ruleForm.quitDate" :disabled="true" />
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="机构扩展" name="3">
          <el-row>
            <el-col :span="12">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="工作电话">
                  <el-input v-model="ruleForm.workPhoneNumber" />
                </el-form-item>
                <el-form-item label="国家">
                  <el-input v-model="ruleForm.workCountry" />
                </el-form-item>
                <el-form-item label="城市">
                  <el-input v-model="ruleForm.workLocality" />
                </el-form-item>
                <el-form-item label="邮编">
                  <el-input v-model="ruleForm.workPostalCode" />
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="12">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="工作邮件">
                  <el-input v-model="ruleForm.workEmail" />
                </el-form-item>
                <el-form-item label="省">
                  <el-input v-model="ruleForm.workRegion" />
                </el-form-item>
                <el-form-item label="地址">
                  <el-input v-model="ruleForm.workStreetAddress" />
                </el-form-item>
                <el-form-item label="传真">
                  <el-input v-model="ruleForm.workFax" />
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="家庭信息" name="4">
          <el-row>
            <el-col :span="12">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="家庭邮箱">
                  <el-input v-model="ruleForm.homeEmail" />
                </el-form-item>
                <el-form-item label="家庭传真">
                  <el-input v-model="ruleForm.homeFax" />
                </el-form-item>
                <el-form-item label="国家">
                  <el-input v-model="ruleForm.homeCountry" />
                </el-form-item>
                <el-form-item label="城市">
                  <el-input v-model="ruleForm.homeLocality" />
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="12">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="家庭电话">
                  <el-input v-model="ruleForm.homePhoneNumber" />
                </el-form-item>
                <el-form-item label="家庭邮编">
                  <el-input v-model="ruleForm.homePostalCode" />
                </el-form-item>
                <el-form-item label="省">
                  <el-input v-model="ruleForm.homeRegion" />
                </el-form-item>
                <el-form-item label="家庭地址">
                  <el-input v-model="ruleForm.homeStreetAddress" />
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-tab-pane>
        <div style="text-align: center;">
          <el-button type="primary" @click="submitForm('ruleForm')" style="text-align: center;">提交</el-button>
        </div>

      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import api from "@/api/dispose";
export default {
  name: "personal",
  data() {
    return {
      activeName: "0",
      userObj: {},
      ruleForm: {
        displayName: "",
        username: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        displayName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
        username: [
          { required: true, message: "请输入登录账号", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    api.getPersonalData().then((res) => {
      if (res.code == 0) {
        this.ruleForm = res.data;
        this.ruleForm.gender = this.ruleForm.gender + "";
      }
    });
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          api.updatePersonalData(this.ruleForm).then(res => {
            if (res.code == 0) {
              this.$message.success('操作成功');
            }
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
}
</style>
